<template>
<!-- 模态框 查询商品列表 -->
    <div>
          <el-dialog title="热销详情" :visible.sync="dialogVisible" width="80%" >
            <div>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>条件查询</span>
                    </div>
                    <div>
                        <el-row>
                        <el-form :inline="true" :model="markets" class="demo-form-inline">
                            <el-col :span="4">
                            <el-form-item>
                                <el-input  placeholder="商品名称/模糊查询" v-model="markets.name" ></el-input>
                            </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item>
                                <el-input  placeholder="商品货号" v-model="markets.productSn"></el-input>
                                </el-form-item>
                            </el-col>
                             <el-col :span="4">
                                 <el-form-item>
                                    <el-select  placeholder="品牌" v-model="markets.brandId">
                                        <el-option v-for="item in findAllList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                             <el-col :span="4">
                                 <el-form-item>
                                    <el-select  placeholder="上架状态" v-model="markets.publishStatus">
                                        <el-option label="上架" value="1"></el-option>
                                        <el-option label="未上架" value="0"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                 <el-form-item>
                                   <el-select  placeholder="审核状态" v-model="markets.verifyStatus">
                                        <el-option label="审核" value="1"></el-option>
                                        <el-option label="未审核" value="0"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item class="btn">
                                    <el-button size="mini" @click="reset">重置</el-button>
                                    <el-button size="mini" type="primary" @click="search">搜索</el-button>          
                                </el-form-item>
                            </el-col>
                        </el-form>
                        </el-row>
                    </div>
                </el-card>
            </div>
            <div>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>商品列表</span>
                    </div>
                    <div>
                        <el-table v-loading="loading" :data="productsList" border style="width: 100%">
                            <el-table-column fixed   type="index" width="50" label="序号"></el-table-column>
                            <el-table-column  width="150" label="选择">
                                <template slot-scope="scope">
                                        <el-radio v-model="radioId" :label="scope.row.id" @change="radioList(scope.row)"><span /></el-radio>
                                </template>
                            </el-table-column>
                            <el-table-column  width="150" label="商品图片">
                                <template slot-scope="scope">
                                    <img style="width:100px;height:auto" :src="scope.row.pic" alt="">
                                </template>
                            </el-table-column>
                            <el-table-column  width="250" label="商品名称">
                                <template slot-scope="scope">
                                    <div>{{scope.row.name}}</div>
                                    <div>品牌:{{scope.row.brandName}}</div>
                                    <div></div>
                                </template>
                            </el-table-column>
                            <el-table-column  width="150" label="商品价格">
                                <template slot-scope="scope">
                                    <div>原价:{{scope.row.price}}</div>
                                    <div>现价:{{scope.row.promotionPrice}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column  width="150" label="商品类别">
                                <template slot-scope="scope">
                                   <div>{{scope.row.productCategoryName}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column  prop="author" width="50"  label="商品重量"></el-table-column>

                        </el-table>
                        <!-- 这是分页 -->
                        <div>
                            <el-pagination 
                            :current-page="page.start"
                            :page-sizes="page.pageSizes"
                            :page-size="page.limit" 
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total"
                            @size-change="handleSizeChange"  
                            @current-change="handleCurrentChange">
                            </el-pagination>
                        </div>
                    </div>
                </el-card>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
        <el-dialog
        title="编辑限时活动"
        :visible.sync="Visibledialog"
        width="70%"
       >
        <el-row>
            <el-form :model="TimeActivities"  label-width="140px" class="demo-ruleForm">
                <el-col :span="12">
                    <el-form-item label="商品原价" prop="name">
                         <span>{{TimeActivities.price}}</span>
                    </el-form-item>
                </el-col>
                 <el-col :span="12">
                    <el-form-item label="商品名称" >
                        <span>{{TimeActivities.name}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="促销价格" prop="sort">
                         <el-input-number v-model="TimeActivities.promotionPrice" :min="0" label="促销价格"></el-input-number>  
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="排序" prop="productCount ">
                         <el-input-number v-model="TimeActivities.sort" :min="0" label="排序"></el-input-number>  
                    </el-form-item>
                </el-col>
               <el-col :span="12">
                    <el-form-item label="开始时间" prop="productCount ">
                        <el-date-picker
                            v-model="TimeActivities.promotionStartTime"
                            type="datetime"
                            placeholder="开始时间"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
               <el-col :span="12">
                    <el-form-item label="结束时间" prop="productCount ">
                         <el-date-picker
                            v-model="TimeActivities.promotionEndTime"
                            type="datetime"
                            placeholder="结束时间"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="活动限购数量" prop="productCount ">
                         <el-input v-model="TimeActivities.promotionPerLimit" placeholder="限购数量"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="商品图片" prop="productCount ">
                        <el-upload
                            class="avatar-uploader"
                            :action="uploadUrl"
                            :show-file-list="false"
                            :headers="uploadHeaders"
                            :on-success="AvatarSuccess"
                            >
                            <img style="width:100px;height:auto" v-if="TimeActivities.pic" :src="TimeActivities.pic" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="Visibledialog = false">取 消</el-button>
            <el-button type="primary" @click="editproductList">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>
<script>
import productList from "@/api/product/list"
import brand from "@/api/product/brand"
import market from "@/api/market/list"

import mix from "@/mixin/index";

export default {
    mixins:[mix],

    data(){
        return{
        dialogVisible: false,
        Visibledialog:false,
        //商品列表
        productsList:[],
        //品牌名称列表
        findAllList:[],
        //限时活动
        TimeActivities:{
            brandName: "",
            createTime: "",
            modifyTime: "",
            name: "",
            pic: "",
            price: 0,
            productCategoryName: "",
            productId: "",
            productSn: "",
            promotionEndTime: "",
            promotionPerLimit: 0,
            promotionPrice: 0,
            promotionStartTime: "",
            publishStatus: 0,
            recommendId: "",
            sort: 0,
            type: 0
        },
        //搜索对象
      markets:{
          name:'',
          productSn:'',
          brandName:'',
          publishStatus:'',
          type:'',
          brandId:'',
      },
         //页码
      page:{
          //开始页
        start: 1,
        //最多几行
        limit: 5,
        //总页数
        total: 0,
        pageSizes:[5, 10, 20, 30],
      },
      //加载中
      loading:false,
      //被radio选中的id
        radioId: '',
        }

    },
    methods:{
        //获取商品列表信息
        init() {
            productList.productsByPage(this.page.start,this.page.limit,this.markets).then(res=>{
                console.log("商品列表",res);
                if(res.success){
                    this.productsList=res.data.rows;
                    this.page.total=res.data.total;
                }else{
                    this.$message.error("呦吼,你获取商品列表信息失败了呢")
                }
            })
        },
        //品牌名称列表
        BrandfindAll(){
            brand.findAllBrand().then(res=>{
                console.log("品牌名称",res);
                if(res.success){
                    this.findAllList=res.data.items
                }else{
                    this.$message.error("阿欧,品牌名称列表获取失败,真是太糟糕了")
                }
            })
        },
        //新增
        setList(){
            this.dialogVisible=true;
        },
      //重置
      reset(){
          this.markets= this.$options.data().markets;
            // this.markets.name='';
            // this.markets.productSn='';
            // this.markets.brandName='';
            // this.markets.brandId='';
            // this.markets.type=''
            // this.markets.publishStatus='';
            this.init();
            this.BrandfindAll();
      },
      //搜索
      search(){
          this.page.start=1;
            this.init()
      },
      //点击出现
      radioList(row){
         this.Visibledialog=true;
         this.TimeActivities=row;
          console.log(row)
      },
      //图片上传成功之后的回调
      AvatarSuccess(res, file){
          console.log(res,file);
        if(res.success){
              this.TimeActivities.pic=res.data.fileUrl
          }else{
              this.$message.error("获取图片失败,请重新上传")
          }
      },
      //添加限时活动(我觉得这个是编辑)
      editproductList(){
        //  this.Visibledialog=false;
         this.$confirm('是否确认新增最热推荐商品?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    console.log(this.TimeActivities);   
                    this.TimeActivities.productId=this.TimeActivities.id;
                     market.updateRecommend(this.TimeActivities).then(res=>{
                         console.log(res)
                         this.dialogVisible=false;
                         if(res.success){
                            this.$message({
                                type: 'success',
                                message: '编辑成功!'
                            });
                            this.Visibledialog=false;
                            this.init();
                        }else{
                            this.$message.error("编辑限时活动失败")
                        }
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
                });
        

      },
    //每页条数pageSize 改变时会触发
    handleSizeChange(val){
      this.page.limit=val;
      this.init()
    },
    //当前页currentPage 改变时会触发
    handleCurrentChange(val){
      this.page.start=val;
      this.init()
    },

    },
    created(){
        this.init();
        this.BrandfindAll();
    }
}
</script>
<style lang="scss" scoped>

</style>